<template>
  <div class="login">
    <div class="form-wrapper">
      <div class="form-container">
        <div class="title">健康社区后台管理系统</div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          width="300"
          class="rule-form"
        >
          <el-form-item prop="user">
            <el-input
              placeholder="请输入用户名"
              prefix-icon="el-icon-user"
              v-model="ruleForm.user"
              maxlength="10"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              placeholder="请输入密码"
              prefix-icon="el-icon-unlock"
              show-password
              v-model="ruleForm.password"
            ></el-input>
          </el-form-item>
          <el-form-item class="btn">
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        user: "",
        password: "",
      },
      rules: {
        user: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$request({
            url: "/b_login",
            method: "POST",
            data: {
              user: this.ruleForm.user,
              password: this.ruleForm.password,
            },
          }).then((res) => {
            if (res.data.mesg == "ok") {
              this.$message({
                message: "登录成功",
                type: "success",
              });
              sessionStorage.setItem("loginToken", "zjj");
              setTimeout(() => {
                this.$router.push("/home");
              }, 200);
              // this.$router.push("/home");
            } else {
              this.$message({
                message: "用户名或密码错误",
                type: "error",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/styles/global.scss";
.login {
  width: 100%;
  height: 100%;
  background: rgb(23, 141, 215);
  background: linear-gradient(
    0deg,
    rgba(23, 141, 215, 0.563929795551033) 0%,
    rgba(23, 138, 59, 1) 100%
  );
  @include center;
  .form-wrapper {
    // width: 600px;
    // height: 400px;
    @include center;
    .form-container {
      width: 350px;
      padding-bottom: 20px;
    }
    .title {
      @include center;
      color: white;
      font-size: 25px;
      margin-bottom: 20px;
    }
    .btn {
      @include center;
      .el-button {
        width: 350px;
      }
    }
    // background-color: #fff;
  }
}
</style>
